<script setup>
import { ref } from 'vue'
//import { updateUserPwd } from "@/api/system/user";

//校验密码的函数
const checkrePassword =(rule,value,callback)=>{
    if(value==''){
        callback(new Error('请再次确认密码'))
    }else if(value!=userDataModel.value.new_pwd){
        callback(new Error('请确保两次输入的密码一样'))
    }else{
        callback()
    }
}


const userDataModel = ref({
  old_pwd: "",
  new_pwd: "",
  re_pwd: ""
})

//定义表单校验规则
const rules={
    old_pwd:[
        {required:true,message:'请输入旧密码',trigger:'blur'},
        {min: 5,max: 16,message:'长度为5~16位非空字符',trigger:'blur'}
    ],
    new_pwd:[
        {required:true,message:'请输入密码',trigger:'blur'},
        {min: 5,max: 16,message:'长度为5~16位非空字符',trigger:'blur'}
    ],
    re_pwd:[
        {validator:checkrePassword,trigger:'blur'}
    ]
}

/* const submit = () => {
  validateForm()
}

const validateForm = () => {
  const form = $refs.form
  form.validate((valid) => {
    if (valid) {
      updateUserPwd(user.value.oldPassword, user.value.newPassword).then(response => {
        msgSuccess("修改成功");
      })
    }
  })
} */

// const close = () => {
//   $store.dispatch("tagsView/delView", $route);
//   $router.push({ path: "/task/tasks" });
// }
//
//导入api中的updateUserInfo
import { userPasswordUpdateService } from '@/api/user.js'
//导入确认框组件
//导入路由
import {useRouter} from 'vue-router'
const router = useRouter()
import {ElMessage, ElMessageBox } from 'element-plus'
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore()
const updatePassword = () => {
    //弹出确认框
    ElMessageBox.confirm(
            '确认修改密码吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )
        .then(async() => {
            //调用修改密码接口修改密码
        let result = await userPasswordUpdateService(userDataModel.value);
        ElMessage.success('修改成功');
        //清除token信息
        tokenStore.removeToken()
        //延迟1秒后跳转到登录页面
        setTimeout(() => {
        router.push('/login')
        ElMessage({
                type: 'success',
                message: '退出登录成功',
            })
        }, 1000)} 
            //提示成功框
        ).catch(() => {
            //取消操作
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
    } 
           
     
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>重置密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form ref="form" :model="userDataModel" :rules="rules" label-width="80px">
                    <el-form-item label="旧密码" prop="old_pwd">
                        <el-input v-model="userDataModel.old_pwd" placeholder="请输入旧密码" type="password" />
                    </el-form-item>
                    <el-form-item label="新密码" prop="new_pwd">
                        <el-input v-model="userDataModel.new_pwd" placeholder="请输入新密码" type="password" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="re_pwd">
                        <el-input v-model="userDataModel.re_pwd" placeholder="请确认密码" type="password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="updatePassword">提交修改</el-button>
                        <!-- <el-button type="danger" size="mini" @click="close">关闭</el-button> -->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>
